<template>
    <div class="common-layout">
    <el-container>
      <el-header><div style="width:100%;height:70px;background-color:#F1E4F4"><p align="center" style="font-size:25px">智慧社区</p></div></el-header>
      <el-container>
        <el-aside width="230px">
            <div style="margin-top:20px;border:1px solid #ccc;height:700px;background-color: #CECECE;" size="large">   
  <el-tree
  height="400px"
    style="max-width: 600px;margin-top:20px;background-color: #CECECE;"
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
    size="large"
  />
        </div>
        </el-aside>
        <el-main>
            <div style="border:1px solid #ccc;height:700px;background-color:#E7DDFF">
               <el-card style="width: 240px;height:140px;margin-top:20px;margin-left:20px;float:left">
                <h3>全部楼层</h3>
                <span style="margin-top:30px;float:left">楼栋数量：{{buildingsNum}}&nbsp;&nbsp;&nbsp;&nbsp;住户人数：{{num1}}</span>
                
            </el-card>
            <el-card style="width: 240px;height:140px;margin-top:20px;margin-left:20px;float:left" v-for="item in tableData" :key="item.id" :value="item.id">
                <h3>{{item.buildingsName}}</h3>
                <span style="margin-top:30px;float:left">单元数：{{item.unitNum}}</span>
              
                <span style="margin-top:30px;float:left;margin-left:20px">楼层：{{item.floorNum}}</span>
            </el-card>
            </div>
           
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
  import { GetTree1,getCard,peoplenum1 } from '/@/api/house/house';
  const data=ref([])
  const tableData=ref([])
  const num1=ref(0)
  onMounted(()=>
{
  GetTree();
  getCard1();
  peoplenum();
})
//树形
const GetTree=async ()=>{
  const res=await GetTree1();
  console.log(res.data.result);
  data.value=res.data.result;
  
}
const buildingsNum=ref(0)
//卡片循环
const getCard1= async ()=>
{
  var res=await getCard();
  console.log(res.data.result);
  tableData.value=res.data.result;
  buildingsNum.value=res.data.result[0].buildingsNum;
  console.log(buildingsNum.value)
}
//统计住户数量
const peoplenum= async ()=>
{
  var res=await peoplenum1();
  num1.value=res.data.result
  console.log(num1.value);
}
</script>